<template>
  <div class="box">
    <p class="p">{{ title }}</p>
    <ul class="ul1">
      <li v-for="item in InfoArr" :key="item.id">
        <div class="left">
          <p>{{ item.site }}</p>
          <p>
            {{ item.phone }}<span>{{ letter }}</span>
          </p>
        </div>
        <div class="right">
          <el-button type="primary" :color="item.status === '配送中' ? '#f5365c' : ''" class="button"
            @click="$emit('goHuiShouDingDanGuanLi')">{{ item.status }}</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getreorders } from '../../api/index'
const InfoArr = ref([])
const letter = ref('TC_ZY')
const text = ref('订单处理')
const timeDao = ref(2 * 25 * 16 * 1000)
getreorders()
  .then((res) => {
    InfoArr.value = res.data.data.data
    // console.log(res, '----')

  })
  .catch((err) => {
    console.log(err)
  })

defineEmits(["goHuiShouDingDanGuanLi"]);
defineProps({
  title: {
    type: String,
    default: "未处理订单",
  },
  color: {
    default: "#5e72e4",
  },
})
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  width: 340px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 5px 5px 5px #ccc;
}

.box .p {
  height: 20px;
  padding: 20px 20px 0px 24px;
}

.box .ul1 {
  flex: 1;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  display: none;
}

.button {
  width: 60px;
  font-size: 10px;
  margin-left:10px;
}

.box .ul1 li {
  display: flex;
  margin: 40px 20px;
  justify-content: space-between;
  border-left: 4px solid red;
  font-size: 14px;

  .left {
    line-height: 30px;
    padding-left: 10px;
    font-size: 14px;

  }
}

.box .ul1 li:not(:nth-child(1)) {
  display: flex;
  margin: 40px 20px;
  justify-content: space-between;
  border-left: 4px solid #5e72e4;
  font-size: 12px;

  .left {
    line-height: 30px;
    padding-left: 10px;
    font-size: 14px;

  }
}

.left p:nth-child(2) {
    color: #ccc;
    font-size: 12px;
}

.left p:nth-child(2) span {
    font-size: 12px;
    margin-left:10px;
}

.right p {
  color: red;
  margin-top: 2px;
  font-size: 12px;
}
</style>
